* {
	/* 初始化 清除页面的内外边距 */
	padding: 0;
	margin: 0;
}
.hamburger_menu {
	/* 宽度占浏览器的可视区域宽度的100% */
	width: 100vm;
	height: 48px;
	background-color: #000;
}
.hamburger_menu #toggle {
	/* 让复选框隐藏 */
	display: none;
}
.hamburger_menu label {
	/* 将行内元素label转为块级元素 ,不然无法设置宽和高 */
	display: block;
	width: 48px;
	height: 48px;
	/* 鼠标移入边小手 */
	cursor: pointer;
}
.hamburger_menu label .hamburger_container {
	/* 相对定位 按照自己的本身位置移动,不会影响父盒子 */
	position: relative;
	top: 17px;
	left: 14px;
	width: 20px;
	height: 20px;
}
.hamburger_menu label .hamburger_container span {
	/* 先让两个重叠在一起 */
	position: relative;
	top: 0;
	/* 还是一样转为块级元素 设置宽和高 */
	display: block;
	height: 1px;
	background-color: #fff;
	/* 在设置取消选中的过渡时间 */
	/* 反之 */
	transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s;
}
/* 设置第二条线 */
.hamburger_menu label .hamburger_container span:nth-child(2) {
	top: 10px;
}
/* 设置转换 */
/* + 是相邻兄弟选择器 找相邻的label */
.hamburger_menu #toggle:checked + label .hamburger_container span:nth-child(1) {
	top: 5px;
	/* 顺时针旋转45度 */
	transform: rotate(45deg);
	/* 现在很生硬,设置过渡时间 */
	/* 这个是先执行top这个属性,然后0.2s后执行旋转 */
	transition: top 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
}
/* 选中后的第二条线 */
.hamburger_menu #toggle:checked + label .hamburger_container span:nth-child(2) {
	top: 5px;
	/* 逆时针旋转45度 */
	transform: rotate(-45deg);
	transition: top 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
}
/* 这个就可以了 */
/* 现在做菜单栏 */
.hamburger_menu ul {
	width: 100vm;
	/* 让高度占浏览器可视区域的100% 减去 导航栏的48px */
	height: calc(100vh - 48px);
	/* 内边距 */
	padding: 0 50px;
	/* 基本框架搭建完了 */
	/* 在做下拉的菜单栏的转换 */
	/* 缩放到0 就是没有 */
	transform: scaleY(0);
	/* 设置过渡时间 */
	transition: all 0.4s ease-in-out;
	/* 现在是中间缩放 我们需要从上面下来 我们设置缩放中心点 */
	/* 写这个值就是从最上面的中间开始缩放和放大,得到下拉的效果 */
	transform-origin: 50% 0;
	background-color: rgba(0, 0, 0, 0.9);
	/* 然后在设置一下透明度 达到更好的视觉效果 */
	/* 起初是全透明 */
	opacity: 0;
}
.hamburger_menu ul li {
	/* 取消小圆点 */
	list-style: none;
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-size: 18px;
}
/* 给前三条li设置下边框 */
.hamburger_menu ul li:nth-child(-n + 3) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* 选中复选框放大到原有高度 */
/* 哈哈,出了小失误,空格就去找input框里面的子元素了
这里面写~ 是通用兄弟选择器,找同级的ul元素 */
.hamburger_menu #toggle:checked ~ ul {
	transform: scaleY(1);
	/* 选中后是不透明 */
	opacity: 1;
}
